<template>
    <div class="input-number">
        <span v-text="name" v-if="name"></span>
        <!-- <input type="text" ref="input" v-model="content" :disabled="disabled" @input="onInput($event)" :maxlength="String(max).length" @focus="onInputFocus($event)" @blur="onInputBlur($event)" @change="onInputChange($event)" /> -->
        <input type="text" ref="input" v-model="local" :disabled="disabled" @input="onInput($event)"
               @focus="onInputFocus($event)" @blur="onInputBlur($event)" @change="onInputChange($event)"
               @keyup.enter="onInputEnter($event)" />
        <em v-text="unit"></em>

        <b class="iconfont icon-shang" @click="setStep(parseFloat(valueFormat) + step)"></b>
        <b class="iconfont icon-xia" @click="setStep(parseFloat(valueFormat) - step)"></b>
    </div>
</template>

<script>
export default {
    name: "NumberInput",
    props: {
        value: { type: [Number, String], required: true },
        step: { type: Number, required: false, default: 1 },
        min: { type: Number, required: false, default: -Infinity },
        max: { type: Number, required: false, default: Infinity },
        unit: { type: String, required: false },
        name: { type: String, required: false },
        disabled: { type: Boolean, required: false, default: false },
        precision: { type: Number, required: false },
    },
    data () {
        return {
            local: '',
            lock: false,
        }
    },
    computed: {
        // 小数点位数
        decimal () {
            let step = "" + (this.step || "");
            let precision = this.precision;

            if (Number.isFinite(precision)) {
                return precision;
            } else if (!step) {
                return 0;
            } else if (!/\./.test(step)) {
                // 整数
                return 1;
            } else {
                let match = (step.match(/\.(\d*)/) || [])[1];
                let length = match ? match.length : 0;
                return length;
            }
        },
        localFormat () {
            return this.getRange(this.local);
        },
        valueFormat () {
            return this.getRange(this.value);
        },

    },
    watch: {
        value () {
            this.setContent()
        }
    },
    methods: {
        // 四舍五入取整
        mathRound (value, n) {
            let bei = Math.pow(10, n);
            let res = Math.round(value * bei) / bei;
            return +parseFloat(res.toPrecision(12));
        },

        getRange (val) {
            let value = this.mathRound(parseFloat(val) || 0, this.decimal);
            return Math.max(Math.min(this.max, value), this.min);
        },

        // 修改输入框
        setContent () {
            if (this.localFormat != this.valueFormat) {
                this.local = this.valueFormat
            }
        },
        // 更新内容
        setValue () {
            if (this.localFormat != this.valueFormat) {
                this.$emit("input", this.localFormat);
                this.$emit("change", this.localFormat);
            }
        },
        setStep (value) {
            if (this.disabled) {
                // 禁用，不管
            } else {
                let range = this.getRange(value)
                this.$emit("input", range);
                this.$emit("change", range);
            }
        },

        onInputFocus (event) {
            this.lock = true;
            event.currentTarget.select();
        },
        onInputChange (event) {
            this.setValue()
        },
        onInputBlur (event) {
            this.lock = false;
            this.local = this.valueFormat
        },
        onInputEnter (event) {
            this.local = this.valueFormat
        },
        onInput (event) {
            this.setValue()
        }
    },
    mounted () {
        this.local = this.valueFormat
    }
};
</script>
<style lang="scss" scoped>
.input-number {
    position: relative;
    display: flex;
    flex-direction: column;

    span {
        height: 14px;
        font-size: 12px;

        color: #555;
        line-height: 14px;
        text-align: left;
        margin-bottom: 4px;
    }

    input {
        width: 100%;
        height: 32px;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #e6e6e6;
        box-sizing: border-box;
        padding: 6px 36px 6px 12px;
        font-size: 14px;

        color: #000000;

        &:hover {
            border-color: #c7c7c7;
        }

        &:focus {
            border-color: #f6b2cd;
            box-shadow: 0 0 1px 1px #f6b2cd;
        }

        &[disabled] {
            background: #f6f6f6;

            ~b {
                color: rgba(0, 0, 0, 0.2);
            }
        }
    }

    em {
        position: absolute;
        right: 0;
        bottom: 0;
        height: 32px;
        line-height: 32px;
        right: 28px;
        font-size: 14px;

        color: #757575;
        pointer-events: none;
    }

    b {
        position: absolute;
        bottom: 15px;
        right: 8px;
        width: 16px;
        height: 14px;
        line-height: 15px;
        text-align: center;
        font-size: 12px;
        font-weight: normal;
        cursor: pointer;
        color: #000;

        &:last-child {
            bottom: 3px;
        }

        &:hover {
            color: #ea4c89;
        }
    }
}
</style>
